@import (reference) "../../normal.less";

.ad-swiper {
  width: 750rpx;
  height: 500rpx;
  overflow: hidden;
  .decorate {
    @fill();
    position: relative;
    .bg-bottom {
      @fill();
      border-bottom-left-radius: 45rpx;
      border-bottom-right-radius: 45rpx;
      background: linear-gradient(to right, #fed614, #c9811a, #fed614);
      z-index: 0;
      position: absolute;
      left: 0;
      top: 0;
      box-shadow: 0 12rpx 8rpx rgba(0, 0, 0, 0.1);
    }
    .bg-top {
      @fill();
      border-bottom-left-radius: 45rpx;
      border-bottom-right-radius: 45rpx;
      background: linear-gradient(to bottom, #cb367b, #e1276a);
      height: calc(100% - 15rpx);
      z-index: 1;
      position: absolute;
      left: 0;
      top: 0;
      overflow: hidden;

      .swiper {
        @fill();
        position: absolute;
        left: 0;
        top: 0;
        z-index: 1;
        .swiper-item {
          @fill();
          .img {
            @fill();
          }
        }
      }

      .indicator {
        // swiper 指示器
        width: 100%;
        height: 30rpx;
        pointer-events: none;
        position: absolute;
        left: 0;
        bottom: 30rpx;
        display: flex;
        flex-flow: row wrap;
        justify-content: center;
        align-items: center;
        z-index: 9;
        .dot {
          width: 80rpx;
          height: 14rpx;
          border-radius: 7rpx;
          background: #fff;
          margin: 0 4px;
          transition: width 0.5s linear;
          transition: box-shadow 1s linear;
        }
        .dot-active {
          width: 114rpx;
          animation: rubberBandX 1s linear forwards;
          transform-origin: left center;
          background: #ffea34;
          box-shadow: 0px 3px 2px 1px rgba(255, 255, 255, 0.4);
        }
      }
    }
  }
}

/* 动画相关 */
